<template>
	<!-- 贡献值 -->
	<view class="container">
		<view class="contribution">
			<image src="@/static/images/list_bg@2x.png"></image>
			<view class="content">
				<view class="content_header">
					<view class="header_title">当前贡献值</view>
					<view class="header_number">{{total_sum}}</view>
				</view>
				<view class="list_content">
					<view class="list_Item" v-for="(item,index) in list" :key="index">
						<view class="list_header">
							<view class="image_box">
								<image src="@/static/images/contribution@2x.png"></image>
							</view>
							<view class="title_box">
								<view class="title">
									{{item.source_type_text}}
								</view>
								<view class="source">
									系统
								</view>
							</view>
						</view>
						<view class="number_header">
							<view class="box_number">
								{{item.change_amount > 0 ?'+'+item.change_amount:item.change_amount}}
							</view>
							<view class="box_time">
								{{item.create_time}}
							</view>
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png" />
						<text class="nr muted">暂无记录～</text>
					</view>
				</loading-footer>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		equityLog,
	} from '@/api/common.js'
	import {
		loadingType
	} from "@/utils/type";
	import {
		loadingFun
	} from "@/utils/tools"
	export default{
		data(){
			return{
				list:[],
				page: 1,
				total_sum: 0,
				loadingStatus: loadingType.LOADING
			}
		},
		onLoad() {
			this.getEquityLogFun()
		},
		onReachBottom() {
			this.getEquityLogFun()
		},
		methods:{
			getEquityLogFun(){
				let {
					list,
					loadingStatus,
					page,
					total_sum
				} = this;
				loadingFun(equityLog, page, list, loadingStatus).then(res => {
					if (res) {
						this.page = res.page;
						this.list = res.dataList;
						this.total_sum = res.resData.total_sum;
						this.loadingStatus = res.status
					}
				})
			}
		}
	}
</script>

<style scoped>
	.contribution{
		position: relative;
		width: 100%;
		height: 360rpx;
	}
	.contribution image{
		width: 100%;
		height: 100%;
	}
	.content{
		position: absolute;
		top: 25%;
		left: 0;
		width: 100%;
	}
	.content_header{
		margin: 0 auto;
		width: 94%;
		height: 180rpx;
	}
	.header_title{
		height: 54rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 54rpx;
	}
	.header_number{
		height: 54rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		line-height: 54rpx;
	}
	.list_box{
		overflow: hidden;
		margin: 0 auto;
		width: 95%;
		border-radius: 10rpx;
	}
	.list_Item{
		margin-bottom: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #FFFFFF;
	}
	.list_header{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.image_box{
		width: 84rpx;
		height: 84rpx;
	}
	.image_box image{
		width: 100%;
		height: 100%;
	}
	.title_box{
		margin-left: 20rpx;
	}
	.title{
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1D1F24;
		line-height: 30rpx;
	}
	.source{
		margin-top: 10rpx;
		height: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 30rpx;
	}
	.box_number{
		height: 30rpx;
		font-size: 28rpx;
		text-align: right;
		font-family: PingFang SC;
		font-weight: bold;
		color: #EA4445;
		line-height: 30rpx;
	}
	.box_time{
		margin-top: 10rpx;
		height: 30rpx;
		font-size: 24rpx;
		text-align: right;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 30rpx;
	}
</style>